<template>
  <div>
    <div class="word">
      <div v-show="isshow">
        <div class="header">
          <div class="group1 flex-col" @click="add">
            <span class="txt2">新增人员</span>
          </div>
          <div class="group1-r">
            <span class="zhuangtai">状态</span>
            <select name id v-model="nState" @change="Selectusers">
              <option value="-1">全部</option>
              <option value="1">启用</option>
              <option value="0">禁用</option>
            </select>
            <input class="danweimingc" type="text" v-model="sName" placeholder="姓名" />
            <el-button type="primary" @click="Selectusers">查询</el-button>
          </div>
        </div>
        <div class="group5 flex-col">
          <el-table
            :data="PostSelectuserEmpty"
            tooltip-effect="dark"
            style="width: 100%"
            @select="tabid(nUid)"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="sOrName" label="单位名称" width="120" align="center"></el-table-column>
            <el-table-column prop="sName" label="姓名" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="sAccount" label="账号" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="nState" label="状态" show-overflow-tooltip align="center">
              <template scope="scope">
                <span v-if="scope.row.nState===1">启用</span>
                <span v-if="scope.row.nState===0">禁用</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip align="center">
              <template slot-scope="scope">
                <a href="#" @click.prevent="showSetRightDialog(scope.row)">分配权限</a>
                <span>|</span>
                <span  class="bj" @click="editor(scope.row)" href="#">编辑</span>
                <span>|</span>
                <a href="#" @click.prevent="dialogVisible = true">删除</a>
                <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span>此操作将永久删除该文件, 是否继续?</span>
          <span slot="footer" class="dialog-footer">
            <button class="button1" @click="dialogVisible = false">取 消</button>
            <button class="button2" type="primary" @click="PostDeleteorg(scope.row)">确 定</button>
          </span>
        </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 修改 -->
      <div v-show="ishowfan">
        <div class="group4 flex-col" @click="addf">
          <span class="txt2">返回</span>
        </div>
        <div class="fanhui">
          <!-- 表单 -->
          <div class="biaodan">
            <div>
              <label for>单位名称</label>
              <select class="tai">
                <option
                  v-for="(item) in Allorganizations"
                  :key="item.nOid"
                  :value="item.nOid"
                >{{item.sName}}</option>
              </select>
            </div>
            <div>
              <label for>姓名</label>
              <input id="tianjia" type="text" v-model="sName" />
            </div>
            <div>
              <label for>账号</label>
              <input id="tianjia" type="text" v-model="sAccount" />
            </div>
            <div>
              <label for>密码</label>
              <input id="tianjia" type="text" v-model="sPassword" />
            </div>
            <div>
              <label for>状态</label>
              <select class="tai" v-model="nState">
                <option value="1" id="1">启用</option>
                <option value="0" id="0">禁用</option>
              </select>
            </div>
            <button @click="PostUpdateuser" class="queding">确定</button>
          </div>
        </div>
      </div>
      <!-- 添加 -->
      <div v-show="istianjai">
        <div class="group4 flex-col" @click="addf">
          <span class="txt2">返回</span>
        </div>
        <div class="fanhui">
          <!-- 表单 -->
          <div class="biaodan">
            <!-- <div>
              <label for>单位名称</label>
              <input type="text" v-model="name" />
            </div>-->
            <div>
              <label for>单位名称</label>
              <select class="tai" v-model="Oid">
                <option
                  v-for="(item) in Allorganizations"
                  :key="item.nOid"
                  :value="item.nOid"
                >{{item.sName}}</option>
              </select>
            </div>
            <div>
              <label for>姓名</label>
              <input id="id1" type="text" v-model="sname" />
            </div>
            <div>
              <label for>账号</label>
              <input id="id1" type="text" v-model="ctime" />
            </div>
            <div>
              <label for>密码</label>
              <input id="id1" type="text" v-model="mimas" />
            </div>
            <div>
              <label for>状态</label>
              <select class="tai" v-model="zhuang">
                <option value="1" id="1">启用</option>
                <option value="0" id="0">禁用</option>
              </select>
            </div>
            <button @click="PostAdduser" class="queding">确定</button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog @close="setRighetClose" title="分配权限" :visible.sync="setRightVisible" width="50%">
      <span>
        <div class="quanxian">权限设置</div>
        <!-- node-key="id"  勾选对应的id值 -->
        <el-tree
          ref="treeRef"
          :data="rightslist"
          show-checkbox
          node-key="tid"
          :props="defaultProps"
          :default-expand-all="true"
          :default-checked-keys="defkeys"
        ></el-tree>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" @click="setRightVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotRight">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Coolies from 'js-cookie'
export default {
  data () {
    return {
      Oid: '',
      dialogVisible:false,
      setRightVisible: false,
      dwList: [
        {
          nOid: '1',
          dwName: '洛阳市涧西分局'
        },
        {
          nOid: '2',
          dwName: '洛阳市刑侦一队'
        },
      ],
      nUid: '',
      cookie: '',
      Allorganizations: [],
      Oid: '',
      xgjs: {},
      // 查询到的用户对象
      editFrom: {},
      // 接收新增返回的id
      jsnUid: [],
      // 新增返回的id
      xznUid: [],
      //
      laddsName: [],
      laddsAccount: [],
      laddsPassword: [],
      laddnState: [],
      laddnOrid: [],
      // 存储登录用户id
      // nUid: [],
      // 用户id
      huoquz: null,
      // 获取点击id
      qxid: '',
      // 获取所有权限
      Allpermissionses: [],
      // 获取所有用户
      Allusersyh: [],
      rightslist: [
        {
          tid: 9, authName: '值班表',
          children: [{
            tid: 10, authName: '值班表', path: 'users'
          }]
        },
        {
          tid: 1, authName: '图片管理',
          children: [
            { tid: 11, authName: '设置轮播图', path: 'roles' },
            { tid: 12, authName: '设置中心图', path: 'rights' },
          ]
        },
        {
          tid: 2, authName: '通讯录管理',
          children: [{
            tid: 13, authName: '通讯录管理', path: 'adds'
          }]
        },
        {
          tid: 3, authName: '新闻管理',
          children: [{
            tid: 14, authName: '新闻管理', path: 'xinwen'
          },
          {
            tid: 15, authName: '新闻类别管理', path: 'wer'
          }]
        },
        {
          tid: 4, authName: '人员管理',
          children: [
            { tid: 16, authName: '单位管理', path: 'danwei' },
            { tid: 17, authName: '人员管理', path: 'renyuan' }]
        },
        {
          tid: 5, authName: '链接管理',
          children: [
            { tid: 18, authName: '查询链接设置', path: 'chaxun' },
            { tid: 19, authName: '平台链接设置', path: 'pingtai' },
            { tid: 20, authName: '专题专栏链接设置', path: 'zhuanti' },
            { tid: 21, authName: '警员采风设置', path: 'jingyuan' },
          ]
        },
        {
          tid: 6, authName: '收件箱',
          children: [
            { tid: 22, authName: '收件箱', path: 'sjx' }
          ]
        },
        {
          tid: 7, authName: '系统设置',
          children: [
            { tid: 23, authName: '系统设置', path: 'xtsz' }
          ]
        }
      ],
      list: [],
      // 树形空间绑定的对象
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      // 默认选中的节点id
      defkeys: [],
      id: '',
      name: '',
      sname: '',
      mimas: '',
      ctime: '',
      miam: '',
      zhuang: '',
      // 修改暂存数据
      newlist: [{
        innOid: '',
        sOrName: '',
        sName: '',
        sAccount: '',
        sPassword: '',
        nState: ''
      }],
      keywords: '',
      value: '',
      input: '',
      isshow: true,
      ishowfan: false,
      istianjai: false,
      labelPosition: 'right',
      multipleSelection: [],
      PostUpdateuserEmpty: [],
      PostDeleteuserEmpty: [],
      PostSelectuserEmpty: [],
      nOid: 1,
      sName: '',
      sAccount: '',
      sPassword: '',
      nState: '-1',
      innUid: '1',
      laddsName: [],
      laddsLinkUrl: [],
      laddinnTid: [],
      laddinnState: [],
    }
  },
  created () {
    this.GetAllorganizations()
    this.userpermissions()
    this.GetAllpermissionses()
    this.Selectusers()
  },
  methods: {
    async showSetRightDialog (role) {
      // 获取用户的权限
      const { data: res } = await this.$http.get('/api/userjurisdiction/Get_Alluserjurisdiction', {
        params: {
          innUid: role.nUid
        }
      })
      console.log(res);
      this.qxid = role.nUid
      // console.log(this.qxid);
      this.getLeafkeys(role, this.defkeys)
      this.setRightVisible = true
    },
    // 获取权限管理
    // 点击为角色分配权限
    async allotRight () {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      // console.log(keys);
      console.log(this.qxid);
      const idStr = keys.join('|')
      console.log(idStr);
      let formData = new FormData()
      formData.append('nUid', this.qxid)
      formData.append('PerIdlist', idStr)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/userjurisdiction/Post_Adduserjurisdiction', formData, config)
      console.log(res);
      var qxadd = { nPerId: idStr, nUid: this.qxid }
      this.Allpermissionses.push(qxadd)
      this.Allpermissionses
      this.setRightVisible = false

    },
    // 监听分配权限对话框关闭事件
    setRighetClose () {
      this.defkeys = []
    },
    // 通过递归形式,获取所有角色下权限的id 并保存到defkeys
    getLeafkeys (node, arr) {
      if (!node.children) {
        // 如果当前node节点没有children则是二级权限
        return arr.push(node.tid)
      }
      // node.children.forEach(item => this.getLeafkeys(item, arr));
    },
    // 获取权限管理
    async GetAllpermissionses () {
      const { data: res } = await this.$http.get('/api/permissions/Get_Allpermissionses?innUid=237')
      console.log(res);
      this.Allpermissionses = res
    },
    async userpermissions () {
      // this.nUid = Coolies.get('nUid')
      console.log(this.nUid, 'nUids');
      let { data: res } = await this.$http.get('/api/user/Get_userpermissions', {
        params: {
          innUid: this.nUid
        }
      })
      console.log(res);
    },
    editor (row) {
      console.log(row)
      this.nUid = row.nUid
      this.sName = row.sName;
      this.sAccount = row.sAccount;
      this.sPassword = row.sPassword;
      this.nState = row.nState;
      this.nOid = row.nOrid
      this.istianjai = false;
      this.isshow = false;
      this.ishowfan = true;
    },
    // 获取单位id
    async GetAllorganizations () {
      const { data: res } = await this.$http.get('/api/organization/Get_Allorganizations')
      this.Allorganizations = res
      console.log(this.Allorganizations);
    },

    // 新增用户
    async PostAdduser () {
      this.laddsName = Coolies.get('insName')
      this.laddsAccount = Coolies.get('insAccount')
      this.laddsPassword = Coolies.get('insPassword')
      this.laddnState = Coolies.get('innState')
      this.laddnOrid = Coolies.get('innOrid')
      // fromdata数据
      let formData = new FormData()
      formData.append('insName', this.sname)
      formData.append('insAccount', this.ctime)
      formData.append('insPassword', this.mimas)
      formData.append('innState', this.zhuang)
      formData.append('innOid', this.Oid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/user/Post_Adduser', formData, config)
      this.xznUid = res
      Coolies.set('innUid', this.xznUid)
      let allres = { sOrName: this.name, sName: this.sname, sAccount: this.ctime, sPassword: this.mimas, nState: this.zhuang }
      this.Allusersyh.push(allres)
      this.Allusersyh
      // console.log(this.zhuang);
      // console.log(nUid);
      this.isshow = true
      this.istianjai = false
      this.ishowfan = false
      this.Selectusers()
       this.$message({
          message: '添加成功',
          type: 'success'
        });
      this.sname=''
      this.ctime=''
      this.mimas=''
      this.zhuang=''
    },
    // 删除用户
    async PostDeleteorg (row) {
      this.dialogVisible=false
      this.nUid = row.nUid
      let formData = new FormData()
      formData.append('nUid', this.nUid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/user/Post_deleteusers', formData, config)
      this.PostDeleteuserEmpty = res
      console.log(res);
      this.Selectusers()
      this.$message({
            type: 'success',
            message: '删除成功!'
          });
    },
    del (id) {
      let index = this.list.findIndex(item => {
        if (item.id === id) {
          return true
        }
      })
      this.list.splice(index, 1)
    },
    search (keywords) {
      let newList = this.list.filter(item => {
        if ((item.name, item.sname, item.ctime).includes(keywords)) {
          return item
        }
      })
      return newList
    },
    add () {
      this.isshow = false
      this.ishowfan = false
      this.istianjai = true
    },
    addf () {
      this.sName=""
      this.nState="-1"
      this.isshow = true
      this.ishowfan = false
      this.istianjai = false
    },
    // 修改用户接口
    async PostUpdateuser () {
      //获取数据
      let formData = new FormData()
      formData.append('nOid', this.nOid)
      formData.append('sName', this.sName)
      formData.append('sAccount', this.sAccount)
      formData.append('sPassword', this.sPassword)
      formData.append('nState', this.nState)
      formData.append('nUid', this.nUid)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/user/Post_Updateuser', formData, config)
      this.PostUpdateuserEmpty = res
      console.log(res);
      this.isshow = true
      this.istianjai = false
      this.ishowfan = false
      this.xgjs = {}
      this.sName=''
      this.nState="-1"
      this.Selectusers()
       this.$message({
          message: '修改成功',
          type: 'success'
        });
    },
    // 查询用户接口
    async Selectusers () {
      let formData = new FormData()
      formData.append('sName', this.sName)
      formData.append('nState', this.nState)
      const config = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }
      const { data: res } = await this.$http.post('/api/user/Post_selectusers', formData, config)
      this.PostSelectuserEmpty = res
    },
    queding () {

    },
    handleSelectionChange (val) {
      this.multipleSelection = val;
    },
    // 修改用户
    set (nUid, sName, sAccount, nState, sPassword) {
      console.log(nUid, sName, sAccount, nState, sPassword);
      // this.newlist = JSON.parse(JSON.stringify(this.Allusersyh[nUid]));
      this.newlist = this.Allusersyh[nUid - 1]
      // danweimingc: sOrName, danweibianh: nOrid,     sOrName, nOrid
      this.xgjs = { bianhao: nUid, xingming: sName, zhanghao: sAccount, mima: sPassword, zhuangtai2: nState }
      console.log(this.xgjs);

      this.isshow = false
      this.ishowfan = true
      this.istianjai = false
    }
  }
};
</script>
<style scoped lang="css" src="./assets/index.css" />
